import { useState, useEffect } from 'react';
import { PlayInfo } from '@/lib/utils/types';
import { dynamicWidth } from '@/lib/utils/utils';

export function useColumns(containerRef: React.RefObject<HTMLElement | null>, minColumns = 1, maxColumns = 4, playList: PlayInfo[] = []) {
  const [columns, setColumns] = useState(0);

  useEffect(() => {
    if (!containerRef.current) return;
    
    // 保存ref的值到局部变量
    const currentContainer = containerRef.current;

    const calculateColumns = () => {
      if (!currentContainer) return;

      // 计算列表中最长标题的长度（考虑英文字母和数字两个占一个中文长度）
      const maxTitleLength = playList.reduce((max, item) => {
        // 计算有效长度：中文按1计算，英文字母和数字按0.5计算
        const effectiveLength = [...item.name].reduce((length, char) => {
          // 检查是否为英文字母或数字
          if (/[a-zA-Z0-9]/.test(char)) {
            return length + 0.5; // 英文字母和数字
          } else {
            return length + 1;   // 中文和其他字符
          }
        }, 0);
        return Math.max(max, effectiveLength);
      }, 0);

      // 计算每个剧集项的理想宽度（基于字符数和字体大小）
      const calculateIdealItemWidth = () => {
        // 使用动态计算宽度，基于当前HTML字体大小
        const charWidth = dynamicWidth(16); // 一个汉字约14px宽
        const padding = dynamicWidth(32);   // 左右内边距总和
        const border = 0;                   // 边框宽度
        // 考虑额外的安全边距，防止标题太紧
        const safetyMargin = dynamicWidth(1);
        // alert(charWidth)
        return Math.ceil(maxTitleLength * charWidth) + padding + border + safetyMargin;
      };



      const containerWidth = currentContainer.clientWidth;
      const itemWidth = calculateIdealItemWidth();

      const gap = dynamicWidth(8); // 网格间隙大小
      if(containerWidth === 0){
        setColumns(0);
        return
      }

      // 计算能容纳多少列（考虑间隙）
      let calculatedColumns = Math.floor((containerWidth -  dynamicWidth(20) + gap) / (itemWidth + gap));
      // 限制在指定范围内
      calculatedColumns = Math.max(minColumns, Math.min(maxColumns, calculatedColumns));
      
      setColumns(calculatedColumns);
    };

    // 首次计算
    calculateColumns();

    // 监听窗口大小变化
    const resizeObserver = new ResizeObserver(calculateColumns);
    resizeObserver.observe(currentContainer);

    return () => {
      resizeObserver.unobserve(currentContainer);
      resizeObserver.disconnect();
    };
  }, [containerRef, minColumns, maxColumns, playList]);

  return columns;
} 

/**
 * 移动端网格列数计算钩子
 * @param containerRef 容器引用
 * @param episodes 当前显示的选集列表
 * @param allEpisodes 所有选集列表
 * @param minColumns 最小列数
 * @param maxColumns 最大列数
 * @returns 计算得到的网格列数
 */
export function useGridColumns(
  containerRef: React.RefObject<HTMLElement | null>,
  episodes: PlayInfo[] = [],
  allEpisodes: PlayInfo[] = [],
  minColumns = 1,
  maxColumns = 8
) {
  const [gridCols, setGridCols] = useState(5); // 默认网格列数

  useEffect(() => {
    if (!containerRef.current) return;
    
    // 保存ref的值到局部变量
    const currentContainer = containerRef.current;

    const calculateGridCols = () => {
      if (!currentContainer) return;
      
      // 获取容器宽度
      const containerWidth = currentContainer.clientWidth || window.innerWidth;
      
      // 计算当前选集中最长的文本长度（考虑英文字母和数字两个占一个中文长度）
      let maxTitleLength = 0;
      
      // 首先尝试从当前显示的选集中计算
      if (episodes && episodes.length > 0) {
        maxTitleLength = episodes.reduce((max, episode) => {
          // 提取纯数字部分
          const cleanedText = episode.name.replace(/第|集|话|期|期$/g, '') || '1';
          // 计算有效长度：中文按1计算，英文字母和数字按0.5计算
          const effectiveLength = [...cleanedText].reduce((length, char) => {
            // 检查是否为英文字母或数字
            if (/[a-zA-Z0-9]/.test(char)) {
              return length + 0.5; // 英文字母和数字
            } else {
              return length + 1;   // 中文和其他字符
            }
          }, 0);
          return Math.max(max, effectiveLength);
        }, 0);
      } 
      // 如果当前没有选集或计算结果为0，则从所有选集中计算
      else if (allEpisodes.length > 0) {
        maxTitleLength = allEpisodes.reduce((max, episode) => {
          // 提取纯数字部分
          const cleanedText = episode.name.replace(/第|集|话|期|期$/g, '') || '1';
          // 计算有效长度：中文按1计算，英文字母和数字按0.5计算
          const effectiveLength = [...cleanedText].reduce((length, char) => {
            // 检查是否为英文字母或数字
            if (/[a-zA-Z0-9]/.test(char)) {
              return length + 0.5; // 英文字母和数字
            } else {
              return length + 1;   // 中文和其他字符
            }
          }, 0);
          return Math.max(max, effectiveLength);
        }, 0);
      }
      
      // 计算每个剧集项的理想宽度（基于字符数和字体大小）
      // 使用动态计算宽度，基于当前HTML字体大小
      const charWidth = dynamicWidth(16); // 一个汉字的宽度
      const padding = dynamicWidth(16);   // 左右内边距总和
      const border = dynamicWidth(2);     // 边框宽度
      const safetyMargin = dynamicWidth(1); // 额外安全边距
      
      // 计算理想的项目宽度
      const idealItemWidth = Math.max(dynamicWidth(48), Math.ceil(maxTitleLength * charWidth) + padding + border + safetyMargin);
      
      // 考虑间距(8px)计算一行可容纳的列数
      const gap = dynamicWidth(8); // gap-2 等于 8px
      const containerPadding = dynamicWidth(32); // 容器左右padding总共32px
      
      // 计算能容纳多少列（考虑间隙）
      let calculatedColumns = Math.floor((containerWidth - containerPadding + gap) / (idealItemWidth + gap));
      
      // 确保至少有最小列数，最多有最大列数
      setGridCols(Math.min(maxColumns, Math.max(minColumns, calculatedColumns)));
    };

    // 初始计算
    calculateGridCols();

    // 监听窗口大小变化
    const resizeObserver = new ResizeObserver(calculateGridCols);
    resizeObserver.observe(currentContainer);

    return () => {
      resizeObserver.unobserve(currentContainer);
      resizeObserver.disconnect();
    };
  }, [containerRef, episodes, allEpisodes, minColumns, maxColumns]);

  return gridCols;
} 